<template>
	<view>
		<pageHeader  @back='back' :fixed='true' :border='true'>
			<text>产品详情</text>
			<image src="/static/svg/moer11.svg" @tap="toShowMenu"  class="header-right-img" slot="right"></image>
		</pageHeader>
		<view class="body" v-if="message.specific">
			<text class="title">{{message.specific.softTitle}}</text>
			<view class="style">
				<text>{{message.specific.softStyle}}</text>
				<text class="time">{{message.specific.addTime}}</text>
			</view> 
			<view style="height: 1rpx;background-color: #DDDDDD;margin-top: 29rpx;"></view>
			<view style="height: 10rpx;"></view>
			<view class="item" v-for="(item,index) in message.list" :key='index'>
				<view class="bigImg" v-if="item.image">
					<image :src="item.image" mode="widthFix" lazy-load=""></image>
				</view>
				<rich-text :nodes="item.content"></rich-text>
				<!-- <text class="content">{{item.content}}</text> -->
				<view class="products">
					<view class="products_title"><text>展示产品（{{item.count}}）</text></view>
					<view class="product" v-for="(item1,index1) in item.product" :key='index1'>
						<image :src="item1.shopImage" class="product_img" mode="aspectFill" lazy-load></image>
						<view class="product_content">
							<text class="product_content_word">{{item1.shopContent}}</text>
							<view class="price">
								<text>¥</text>
								<text>{{item1.shopPrice.toFixed(2)}}</text>
							</view>
						</view>
						<image src="/static/svg/shoppingCart.svg" mode="" class="shopping_cart"></image>
					</view>
				</view>
			</view>
			<view style="height:16rpx ;background-color: #F5F5F5;"></view>
			<conciseComment :list='messageList' @praise='commentPraise' @dele='getThreeComment' @toMore='toAllComment'/>	
		</view>
		<view class="lookAndLook_title" v-if="lookList.length>0">
			<view></view>
			<text>看了又看</text>
			<view></view>
		</view>
		<view class="lookAndLook_body" v-if="lookList.length>0">
			<softProducts v-for='(item,index) in lookList' :key='index' :message='item' :index='index' :isIndex='true' @collect='softProductCollect' @praise='softProductPraise'/>
		</view>
		<view style="height: 118rpx;"></view>
		<view class="consultation" >
			<image src="/static/svg/menu6.svg" mode=""></image>
			<text>找TA咨询</text>
		</view>
		<productFooter :message='message.specific' @collect='collect' @praise='praise' :isInDetail='true'/>
		<menu1 v-model="menuShow"></menu1>
	</view>
</template>

<script>
	import urls from "@/common/util/homeArtIndex.js"
	import softProducts from "@/components/index/softProducts.vue"
	import pageHeader from "@/components/header/header.vue"
	import productFooter from "@/components/footer/productFooter.vue"
	import menu1 from "@/components/menu/menu.vue"
	import conciseComment from "@/components/comment/conciseComment.vue"
	export default {
		components: {pageHeader,conciseComment,productFooter,menu1,softProducts},
		data() {
			return {
				menuShow:false,
				id:"",
				softStyle:"",
				softPlace:"",
				messageList:[],
				lookList:[],
				message:{}
			};
		},
		onLoad(e) {
			this.id=e.id
			this.softStyle=e.softStyle
			this.softPlace=e.softPlace
		},
		onShow() {
			this.getMessage()
			this.getThreeComment()
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			toShowMenu(){
				this.menuShow=true
			},
			async getThreeComment(e){
				if(e){
					this.message.discussNumber-=1
				}
				let data={}
				data.answerId=this.id
				data.state=2
				data.userId=localStorage.getItem('userId')
				let res=await urls.threeComment(data)
				this.messageList=res.data
			},
			async getMessage(){
				let data={}
				data.designStyle=this.softStyle
				data.designPlace=this.softPlace
				data.softId=this.id
				data.userId=localStorage.getItem('userId')
				let res=await urls.softspecific(data)
				console.log(res)
				this.lookList=res.data.softArticles
				this.message=res.data
			},
			softProductCollect(index,isAlready){
				if(!isAlready){
					this.lookList[index].collection="1"
					this.lookList[index].collectionNumber-=1
				}else{
					this.lookList[index].collection="0"
					this.lookList[index].collectionNumber+=1
				}	
			},
			softProductPraise(index,isAlready){
				if(!isAlready){
					this.lookList[index].zan="1"
					this.lookList[index].zanNumber-=1
				}else{
					this.lookList[index].zan="0"
					this.lookList[index].zanNumber+=1
				}	
			},
			commentPraise(index,isAlready){
				if(!isAlready){
					this.messageList[index].zan="1"
					this.messageList[index].zanNumber-=1
				}else{
					this.messageList[index].zan="0"
					this.messageList[index].zanNumber+=1
				}	
			},
			toAllComment(){
				localStorage.setItem("designMessage",JSON.stringify(this.message.specific))
				uni.navigateTo({
					url: '/pages/homeDesign/allComment?id='+this.message.specific.softId+"&state="+2
				})
				
			},
			collect(isAlready){
				if(!isAlready){
					this.message.specific.collection="1"
					this.message.specific.collectionNumber-=1
				}else{
					this.message.specific.collection="0"
					this.message.specific.collectionNumber+=1
				}	
			},
			praise(isAlready){
				if(!isAlready){
					this.message.specific.zan="1"
					this.message.specific.zanNumber-=1
				}else{
					this.message.specific.zan="0"
					this.message.specific.zanNumber+=1
				}	
			},
		}
	}
</script>

<style lang="scss">
page{
	background-color: #F5F5F5;
}
.header-right-img{
	height: 50rpx;
	width: 50rpx;
	margin-right: 29rpx;
}
.body{
	margin-top: 16rpx;
	background-color: #FFFFFF;
	padding-top: 35rpx;
	.title{
		font-size: 32rpx;
		color:#333333 ;
		letter-spacing: 1rpx;
		display: block;
		line-height: 42rpx;
		padding: 0 30rpx;
		text-align: justify;
		font-weight: bold;
	}
	.style{
		margin-top: 13rpx;
		padding-left: 30rpx;
		display: flex;
		align-items: center;
		.time{
			font-size:24rpx ;
			color:#999999;
			letter-spacing: 1rpx;
			display: block;
			line-height: 24rpx;
			white-space: pre;
			margin-left: 12rpx;
		}
	}
	.item{
		padding: 0 30rpx;
		.bigImg{
			width: 690rpx;
			margin-top: 30rpx;
			image{
				width: 100%;
				display: block;
			}
		}
		.content{
			display: block;
			font-size: 30rpx;
			color: #333333;
			line-height: 48rpx;
			letter-spacing: 1rpx;
			padding-top: 30rpx;
			text-align: justify;
		}
		rich-text{
			font-size: 30rpx;
			color: #333333;
			line-height: 48rpx;
			letter-spacing: 1rpx;
			text-align: justify;
			/deep/div{
				margin-top: 30rpx;
			}
			/deep/ p:first-of-type{
				margin-top: 30rpx;
			}
			/deep/ p:first-of-type>img{
				margin-top: 0;
			}
			/deep/ p{
				display: block;
				font-size: 30rpx;
				color: #333333;
				line-height: 48rpx;
				letter-spacing: 1rpx;
				text-align: justify;
			}
			/deep/ img{
				width: 690rpx;
				margin-top: 30rpx;
				display: block;
			}
		}
		.products{
			padding-top: 40rpx;
			.products_title{
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 26rpx;
				text{
					font-size: 32rpx;
					letter-spacing: 1rpx;
					font-weight: bold;
					line-height: 32rpx;
					color: #333333;
					position: relative;
				}
			}
			.product{
				height: 185rpx;
				border-bottom: 1rpx solid #EEEEEE;
				display: flex;
				align-items: center;
				position: relative;
				.product_img{
					height: 120rpx;
					width: 120rpx;
					border-radius: 5rpx;
				}
				.product_content{
					height: 120rpx;
					margin-left: 26rpx;
					font-size: 28rpx;
					display: flex;
					flex-flow: column;
					justify-content: space-between;
					.product_content_word{
						font-size: 28rpx;
						color:#333333 ;
						letter-spacing: 1rpx;
						line-height: 40rpx;
						width: 16em;
						position: relative;
						word-break: break-all;
						top: -6rpx;
						text-align: justify;
					}
					.price{
						display: flex;
						align-items: center;
						position: relative;
						bottom: -2rpx;
					}
				}
				.shopping_cart{
					height: 50rpx;
					width: 50rpx;
					position: absolute;
					right: 0;
					bottom: 29rpx;
				}
			}
		}
	}
}
.style>text:first-of-type{
	display: block;
	height:36rpx ;
	line-height: 36rpx;
	padding: 0 8rpx;
	border-radius: 8rpx;
	background-color: #D7BD9F;
	color: #704F29;
	font-size: 24rpx;
	letter-spacing: 1rpx;
}
.products_title>text::after{
	content: "";
	display: block;
	height: 6rpx;
	width: 34rpx;
	border-radius: 5rpx;
	background-color:#333333 ;
	position: absolute;
	left: 0;
	bottom:-16rpx ;
}
.price>text:first-of-type{
	font-size: 24rpx;
	color:#C84739 ;
	line-height: 33rpx;
	letter-spacing: 1rpx;
}
.price>text:nth-of-type(2){
	font-size: 32rpx;
	line-height: 33rpx;
	font-weight: bold;
	letter-spacing: 1rpx;
	color:#C84739 ;
}
.lookAndLook_title{
	height: 128rpx;
	width: 750rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	view{
		height: 1px;
		background-color: #DDDDDD;
		width: 166rpx;
	}
	text{
		font-size: 28rpx;
		color: #666666;
		letter-spacing: 1rpx;
		margin: 0 30rpx;
	}
}
.lookAndLook_body{
	margin-top: -30rpx;
}
.consultation{
	z-index: 100;
	position: fixed;
	height: 120rpx;
	width: 120rpx;
	border-radius: 50%;
	box-shadow:0px 3rpx 5rpx 2rpx rgba(96,96,96,0.5);
	right: 50rpx;
	bottom: 180rpx;
	display: flex;
	flex-flow: column;
	align-items: center;
	background-color: rgba(255,255,255,0.82);
	image{
		height: 52rpx;
		width: 52rpx;
		margin-top: 16rpx;
	}
	text{
		font-size: 30rpx;
		transform:scale(0.6);
		width: 166.67rpx;
		position: relative;
		left: 9rpx;
		color: #666666;
		font-weight: bold;
		letter-spacing: 1rpx;
		margin-top: 12rpx;
		line-height: 18rpx;
	}
}
</style>
